<template>
  <div>
    <el-dialog
      :model-value="show"
      :width="dialogWidth ? '60%' : '30%'"
      :before-close="handleClose"
    >
      <template #header>
        <div class="title">
          {{ title == "新增" ? title : title.substring(0, title.indexOf("-")) }}
        </div>
      </template>
      <el-form :model="form" ref="ruleFormRef">
        <el-row>
          <template v-for="item in formList">
            <el-col
              :span="
                item.type == 'upload' || item.type == 'editor'
                  ? 24
                  : dialogWidth
                  ? 12
                  : 24
              "
            >
              <el-form-item :label="item.name+'：'" label-width="90px" :prop="item.props">
                <Upload
                :upload_list="item.upload_list"
                :type="item.upload_type"
                v-if="item.type=='upload'"
                v-model.lazy="form[item.props]"></Upload>
                <Editor v-else-if="item.type=='editor'"></Editor>
                <el-select
                  v-else-if="item.type == 'select'"
                  style="width: 100%"
                  remote
                  :remot-method="remoteMethod(item.dictionary, item.props)"
                  v-model="form[item.props]"
                  :placeholder="
                    item.placeholder ? item.placeholder : '请选择' + item.name
                  "
                >
                  <el-option
                    v-for="v in searchOption[item.props + 'List']"
                    :key="v.id"
                    :label="v.value"
                    :value="v.id"
                  />
                </el-select>
                <el-input v-else v-model="form[item.props]" />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            style="margin-right: 10px"
            :loading="loading"
            @click="handleClose"
            >关闭</el-button
          >
          <el-button :loading="loading" type="primary" @click="sure(form)"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import { ElNotification } from "element-plus";
import {
  defineProps,
  toRefs,
  defineEmits,
  ref,
  reactive,
  onMounted,
  watch,
} from "vue";
import Editor from "@/components/Editor/index.vue"
import Upload from "@/components/Upload/index.vue";
// 获取传值
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    required: true,
    type: String,
  },
  formList: {
    required: true,
    type: Array,
  },
  url: {
    type: String,
    required: true,
  },
  searchOption: {
    type: Object,
  },
});
const { show, formList, url, title } = toRefs<any>(props);
const loading: any = ref(false);

//创建表单数据对象
const form: any = reactive({});
const searchOption: any = ref({}); //select下拉数据

formList.value.forEach((item: any) => {
  if (item.type == "select") {
    searchOption.value[item.props + "List"] = [];
  }
  form[item.props] = "";
});
/**
 * 获取下拉选项
 */
function remoteMethod(query: any, props: String) {
  request({
    method: "get",
    url: query,
  }).then((res: any) => {
    searchOption.value[props + "List"] = res.data.data;
  });
}

//调用详情
watch(
  title,
  (val) => {
    if (val.indexOf("修改") >= 0) {
      const id = Number(val.substring(val.indexOf("-") + 1));
      getDetail(id);
    }
  },
  { immediate: true }
);

const emits = defineEmits(["changeDialog"]);
/**
 * 关闭窗口
 */
function handleClose() {
  resetForm();
  emits("changeDialog");
}
//判断窗口大小
const dialogWidth = ref(false);
if (formList.value.length < 6) {
  dialogWidth.value = false;
} else {
  dialogWidth.value = true;
}

// 获取DOM
const ruleFormRef = ref();
/**
 * 重置表单
 */
const resetForm = () => {
  ruleFormRef.value.resetFields();
};
/**
 * 添加or修改
 */
function sure(data: any) {
  let type: any = "";
  let method: any = "";
  loading.value = true;
  const UpData = data;
  if (title.value == "新增") {
    type = "/save";
    method = "POST";
  } else {
    type = "/update";
    method = "PUT";
    UpData.id = title.value.substring(title.value.indexOf("-") + 1);
  }
  request({
    method: method,
    url: "/api" + url.value + type,
    data,
  }).then((res: any) => {
    loading.value = false;
    if (res.data.code == 200) {
      ElNotification({
        title: "完成",
        message: res.data.data,
        type: "success",
      });
      handleClose();
    }
  });
}

/**
 * 获取详情
 */
function getDetail(id: Number) {
  loading.value = true;
  request({
    url: `/api${url.value}/detail?id=${id}`,
    method: "GET",
  }).then((res: any) => {
    loading.value = false;
    for (let key in form) {
      form[key] = res.data.data[key];
    }
  });
}
</script>

<style lang="scss" scoped>
.title {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--el-border-color);
}
:deep(.el-dialog__header) {
  padding: 0;
  height: 40px;
  margin-right: 0;
}
:deep(.el-dialog__headerbtn) {
  top: -6px;
  right: -6px;
}
</style>
